<template>
	<view class="myimgDV">
		<view  class='receiveimage flex justify'>
			<view v-for="(item,ind) in imgPicList" :key="ind" class="imgitem" :style="{width:imgwidth,height:imgheight}"
				 :class="{'onepic':imgboxtype==0,'doublepic':imgboxtype==1,'triplepic':imgboxtype==2}">
				<image 
				 :src="item | thumbnail" 
				 mode="aspectFill" 
				 >
				 </image>
				<view class="uicon" v-if="isVideo">
					<image src="@/static/images/home/post_video.png"></image>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgPicList: [],
				imgboxtype: 0,
				imgwidth: "372rpx",
				imgpad: 0,
				imgheight: '372rpx'
			}
		},
		props: {
			imgList: {
				type: Array
			},
			num: {
				type: Number,
				default: 0
			},
			pad: {
				type: Number,
				default: 0
			},
			isVideo:{
				type: Boolean,
				default: false
			}

		},
		methods: {
			// 图片预览
			previewpic(cind, clist) {
				console.log(cind, clist);
				uni.previewImage({
					urls: clist,
					current: cind,
					indicator: 'default'
				});
			},
			getheight() {
				let that = this;
				const query = uni.createSelectorQuery().in(that)
				query.select('.imgitem').boundingClientRect()
				query.exec(function(res) {
					if (that.num == 0) {
						that.imgheight = 0;
					}else if (that.num == 1) {
						that.imgheight = '372rpx';
					} else if (that.num == 2 || that.num == 4) {
						// that.imgheight = (res[0].width).toFixed(2) + 'px';
					} else {
						// that.imgheight = (res[0].width).toFixed(2) + 'px';
					}
				})
			}
		},
		mounted() {
			// let this = this;
			this.imgPicList = this.imgList;
			if (this.num == 1) {
				this.imgboxtype = 0;
				this.imgwidth = "372rpx";
			} else if (this.num == 2 || this.num == 4) {
				this.imgboxtype = 1;
				this.imgwidth = 49 + '%';
			} else if (this.num == 3 || this.num > 4) {
				this.imgboxtype = 2;
				this.imgwidth = 32 + '%';
			}
			this.$nextTick(function() {
				this.getheight();
			})
		}
	}
</script>

<style lang="scss">
	.myimgDV {
		.flex {
			display: flex;
		}
		.justify {
			justify-content: space-between;
		}
		.receiveimage {
			margin-top: 28rpx;
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			.onepic {
				width: 100%;
				// height: 188rpx;
				// height: auto;
				margin-bottom: 28rpx;
				&:nth-child(3n) {
					margin-right: 0;
				}
			}
			.doublepic {
				// width: 340rpx;
				// height: 340rpx;
				margin-right: 12rpx;
				margin-bottom: 12rpx;
				&:nth-child(2n) {
					margin-right: 0;
				}
			}
			.imgitem {
				position: relative;
				image{
					width: 100%;
					height: 100%;
				}
				.uicon {
					position: absolute;
					top: 16rpx;
					right: 16rpx;
					z-index: 10;
					image{
						width: 46rpx;
						height: 36rpx;
					}
				}

			}
			.triplepic {
				// width: 222rpx;
				// height: 222rpx;
				margin-right: 12rpx;
				margin-bottom: 12rpx;
				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}
</style>
